<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../../icon/iconfont.css" />
    <link rel="stylesheet" href="../../../icon/font-awesome/css/font-awesome.min.css">
    <style>
        header{
          background-color: #fff !important;
          width: 100%;
          position: fixed;
          top:0;
          padding: 1.6rem 0.8rem 0.5rem 0.8rem;
          z-index: 1
        }
        header span:nth-of-type(1){
          font-size: 1rem
        }
        header span:nth-of-type(2){
          font-size: 1rem;
        }
        .aui-tab-item.aui-active {
            color: #D2984D;
            border-bottom: 2px solid #D2984D;
        }

        .flex-item {
            display: flex;
            align-items: center;

            position: relative;
        }

        .flex-logo {
            width: 7.4rem;
            margin: 0 .7rem 0 0;
        }

        .flex-desc {
            font-size: .6rem;
            line-height: .8rem;
        }

        .flex-btn {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .action-btn {
            position: absolute;
            right: 1rem;;
            background-color: #D2984D;
            color: #FFF;
        }
        .checked{
          background: #ccc;
        }
      .actioned-btn  {
          background-color: #808ECB;
          color: #FFF;
        }
        .Isnone{
          display: none;
          text-align: center;
          color:#D2984D;
          font-size: 16px;
          padding-top: 8rem;
          width:100%;
        }
        .chongzhi{
          width: 100%;
          box-shadow: #EEE 0 0 2px 2px;
          margin: .2rem 0 0 0;
        }
        .chongzhi .flex-desc{
          padding: .25rem .5rem;
        }
        .tablist{
          position: fixed;
          top:3rem;
          width: 100%;
          z-index: 1;
          background: #FFF;
        }
        .toptitle{
          position: fixed;
          width: 100%;
          z-index: 1;
          padding:10px;
          top:1rem;
          background:#FFF;
          border-bottom:1px solid #EEE;
        }

        .orderItem{
            display:inline-block;
            width: 100%;
            padding: .1rem 1rem;
            border-top: 1px #EEE solid;
          }
          .orderItem:first-child{
            border:0;
          }
          .orderItem .title{
            font-size: .85rem;
            color:#000;
          }
        .orderItem .items:first-child{
          float: left;
          width: 40%;
          position: relative;
        }
        .orderItem .items:last-child{
          float: left;

          width: 55%;
        }
        .orderItem .items:last-child p{
          font-size: 14px;
        }
        .desc{
          overflow:hidden;
          text-overflow:ellipsis;
          display:-webkit-box;
          -webkit-box-orient:vertical;
          -webkit-line-clamp:2;
        }


        .fa-home{
          color:#D2984D;
          font-size: 1rem;
        }
        .right_price,.ispay_status{
          float: right;
          color:#D2984D;
          font-size: .8rem;
        }
        .list_item{
          width: 95%;
          border-radius: 5px;
          margin: 1rem auto;
          background: #FFF;
          padding:  5px 10px;
        }
        .list_item p{
          padding: .5rem 0;
        }
        .status_btn{
          padding: 3px 8px;
          background: #D2984D;
          color: #FFF;
          border-radius: 2px;
          border:1px solid #D2984D;
        }

        .cancelorder{
          background: #FFF;
          color:#D2984D;
          border:1px solid #D2984D;
        }
        .payed{
          color:green;
        }
        .already_cancel{
          background: #ccc;
          color:#FFF;
          border-color: #ccc;
        }
    </style>
</head>

<body>
    <header>
      <span class="iconfont icon-fanhui" onClick="api.closeWin()"></span>
      <span>我的记录</span>
    </header>
    <div class="max-box" style="margin-top:5.2rem;">
      <div class="tablist">
        <div class="aui-tab">
            <div class="aui-tab-item tapmode aui-active" data-status="order">我的预订</div>
            <div class="aui-tab-item tapmode" data-status="spend" id="myXF">我的消费</div>
            <div class="aui-tab-item tapmode" data-status="recharge">我的充值</div>
        </div>
      </div>
        <div class="item-list orderList" style="padding-top:1px;padding-bottom:2rem;  background: #F5F5F5;"></div>
        <div class="item-list old-orderList" style="padding-top:1px;background: #F5F5F5;"></div>
        <div class="Isnone">暂无相关数据哦！</div>
    </div>
</body>
<script type="text/javascript" src="../../../script/api.js"></script>
<script type="text/javascript" src="../../../lib/zepto.js"></script>
<script type="text/javascript" src="../../../script/dns.js"></script>
<script type="text/javascript" src="../../../script/aui-toast.js"></script>
<script type="text/javascript" src="../../../lib/artTemplate/template.js" ></script>
<script id="OrderTemplate" type="text/html">
  {{each data as value index}}
    <div class="orderItem" data-id="{{data[index].id}}">
      <p class="title" style="padding:0.2rem 0">{{data[index].merchant}}</p>
      <div>
        <div class="items" style="margin-right:0.4rem;overflow:hidden;"><img style="width:7rem;height:5rem;background-image:url('{{data[index].action.img}}');background-size:cover" alt=""></div>
        <div class="items" style="">
          <div class="aui-btn action-btn {{data[index].status == '0' ? '' : 'checked'}}">{{data[index].status == '0' ? '待处理' : '已处理'}}</div>
          <p>{{data[index].name}}</p>
          <p>{{data[index].mobile}}</p>
          <p class="desc">{{data[index].action.title}}</p>
          <p>{{data[index].create_time}}</p>
        </div>
      </div>
    </div>
  {{/each}}
</script>
<script id="SpendTemplate" type="text/html">
  {{each data as value index}}
  <div class="item" style="padding:.1rem .2rem;" data-id="{{data[index].id}}">
      <div class="flex-item">
          <div class="chongzhi">
              <div class="flex-desc">单号：<em style="color:#D2984D;font-size:14px;">{{data[index].order}}</em></div>
              <div class="flex-desc">商家：<em style="color:#D2984D;font-size:14px;">{{data[index].merchant.title}}</em></div>
              <div class="flex-desc">金额：<em style="color:#D2984D;font-size:14px;">￥ {{data[index].total_amount}}</em></div>
              <div class="flex-desc">积分：<em style="color:#D2984D;font-size:14px;">-{{data[index].integral}}</em></div>
              <div class="flex-desc">余额：<em style="color:#D2984D;font-size:14px;">-{{data[index].balance}}</em></div>
              <div class="flex-desc">卡券：<em style="color:#D2984D;font-size:14px;">{{data[index].coupon.title ? data[index].coupon.title : '暂无'}}(-￥{{data[index].coupon.face_value ? data[index].coupon.face_value : '0'}})</em></div>
              <div class="flex-desc">时间：<em style="color:#D2984D;font-size:14px;">{{data[index].create_time}}</em></div>
          </div>
      </div>
  </div>
  {{/each}}
</script>
<script id="RechargeTemplate" type="text/html">
  {{each data as value index}}
    <div class="item" style="padding:.1rem .2rem;" data-id="{{data[index].id}}">
        <div class="flex-item">
            <div class="chongzhi">
                <div class="flex-desc">单号：<em style="color:#D2984D;font-size:14px;">{{data[index].order}}</em></div>
                <div class="flex-desc">类型：<em style="color:#D2984D;font-size:14px;">{{data[index].remark}}</em></div>
                <div class="flex-desc">金额：<em style="color:#D2984D;font-size:14px;">￥ {{data[index].amount}}</em></div>
                <div class="flex-desc">时间：<em style="color:#D2984D;font-size:14px;">{{data[index].create_time}}</em></div>
            </div>
        </div>
    </div>
  {{/each}}
</script>
<script id="ordersTpl" type="text/html">
  {{each data as value index}}
    <div class="list_item">
        <p class="title" style="padding:0.2rem 0">
          <i class="fa fa-home fa-fw"></i><span style="color:#444;font-size:.8rem;">{{value.merchant_name}}</span>
          <span class="right_price">&yen;{{value.price}}</span>
        </p>
        <p>{{value.hotel_name}}
          {{if value.status == 2}}
            <span class="ispay_status payed">已支付</span>
            {{else if value.status == 1 && value.is_pay == 1}}
              <span class="ispay_status payed">已支付</span>
            {{else if value.status == 1 && value.is_pay == 0}}
              <span class="ispay_status">未支付</span>
            {{else if value.status == 0}}
              <span class="ispay_status">未支付</span>
          {{/if}}
        </p>
        <p>{{value.start_time}} 至 {{value.end_time}} ({{value.days}}晚{{value.num}}间)</p>
        <p style="text-align:right;">
          {{if value.status == 2}}
              <span class="status_btn">已入住</span>
            {{else if value.status == 1 && value.is_pay == 1}}
              <span class="status_btn">预订成功</span>
            {{else if value.status == 1 && value.is_pay == 0}}
              <span class="status_btn cancelorder" onclick="cancel_order({{value.id}})">取消订单</span>&nbsp;&nbsp;
              <span class="status_btn" onclick="gotopay({{value.id}});">提交订单</span>
            {{else if value.status == 0}}
              <span class="status_btn cancelorder already_cancel">订单已取消</span>
          {{/if}}
        </p>
    </div>
  {{/each}}
</script>
<script type="text/javascript">
    var toast = new auiToast({});
    apiready = function() {
      var pageStatus = api.pageParam.pay;
      if(pageStatus == 'ispay'){
        $('.old-orderList').hide();
        $('#myXF').click(); //从支付页面过来 显示 ‘我的消费’
      }else{
        return;
      }
    };

    $(document).ready(function(){
     getOrders();
     orders_list();
    })

    //tab切换
    $('.aui-tab-item').each(function() {
        $(this).click(function() {
          $('.aui-tab-item').removeClass('aui-active');
          $(this).addClass('aui-active');
          var status = $(this).data('status');
          if(status == 'order'){
            getOrders()
            orders_list();
          }else if (status == 'spend') {
            spend();
          }else{
            recharge()
          }

        })
    });

    //预订记录--含取消订单
    function orders_list(){
      $.ajax({
         url: dns + 'hotelorder/list',
         type: 'GET',
         data: {},
         beforeSend: function(request) {
             request.setRequestHeader("token", localStorage.getItem("token"));
             },
         success: function (res) {
           // console.log(JSON.stringify(res));
             if(res.data){
              $('.orderList').show();
               $('.Isnone').hide();
               var html = template('ordersTpl', {data: res.data});
               $('.orderList').html(html);
             }else{
               $('.orderList').hide();
               if(!$('.old-orderList').html()){
                 $('.Isnone').show();
               }

             }
         },
        });
    }

    //查询预订记录
     function getOrders () {
       $.ajax({
          url: dns + 'user/booking/user/order',
          type: 'GET',
          data: {},
          beforeSend: function(request) {
              request.setRequestHeader("token", localStorage.getItem("token"));
              },
          success: function (res) {
            // console.log(JSON.stringify(res));
              if(res.data){
                $('.old-orderList').show();
                $('.Isnone').hide();
                var html = template('OrderTemplate', {data: res.data});
                $('.old-orderList').html(html);
              }else{
                $('.old-orderList').hide();
                if(!$('.orderList').html()){
                  $('.Isnone').show();
                }
              }
          },
         });
      };

    //用户消费记录
    function spend () {
      $('.old-orderList').hide();
      $.ajax({
         url: dns + 'user/payment/order',
         type: 'GET',
         data: {},
         beforeSend: function(request) {
             request.setRequestHeader("token", localStorage.getItem("token"));
             },
         success: function (res) {
          //  console.log(JSON.stringify(res));
           if(res.data){
             $('.orderList').show();
             $('.Isnone').hide();
             var html = template('SpendTemplate', {data: res.data});
             $('.orderList').html(html);
           }else{
             $('.orderList').hide();
             $('.Isnone').show();
               $('.old-orderList').hide();
           }
         },
        });
    };

    //用户充值记录
    function recharge () {
      $('.old-orderList').hide();
      $.ajax({
         url: dns + 'user/recharge/order',
         type: 'GET',
         data: {},
         beforeSend: function(request) {
             request.setRequestHeader("token", localStorage.getItem("token"));
             },
         success: function (res) {
          //  console.log(JSON.stringify(res));
           if(res.data){
             $('.orderList').show();
             $('.Isnone').hide();
             var html = template('RechargeTemplate', {data: res.data});
             $('.orderList').html(html);
           }else{
             $('.orderList').hide();
             $('.Isnone').show();
               $('.old-orderList').hide();
           }
         },
        });
    }

    //提交订单---返回支付
    function gotopay(id) {
      api.openWin({
          name: 'pay',
          url: '../../frame1/pay.html',
          pageParam: {
            'payid':id,
          },
      });
    }

    //取消订单
    function cancel_order(id){
      var dialogBox = api.require('dialogBox');
      dialogBox.alert({
          texts: {
              title: '温馨提示',
              content: '您确认要取消此订单？',
              leftBtnTitle: '取消',
              rightBtnTitle: '确认'
          },
          styles: {
              bg: '#fff',
              w: 300,
              corner:2,
              title: {
                  marginT: 20,
                  icon: 'widget://res/gou.png',
                  iconSize: 40,
                  titleSize: 14,
                  titleColor: '#000'
              },
              content: {
                  color: '#000',
                  size: 14
              },
              left: {
                  marginB: 20,
                  marginL: 20,
                  w: 130,
                  h: 35,
                  corner: 2,
                  bg: '#eee',
                  color: '#444',
                  size: 12,
              },
              right: {
                  marginB: 20,
                  marginL: 10,
                  w: 130,
                  h: 35,
                  corner: 2,
                  bg: '#D59B4F',
                  color: '#FFF',
                  size: 12,
              }
          }
        }, function(ret) {
            if (ret.eventType == 'left') {
                var dialogBox = api.require('dialogBox');
                dialogBox.close({
                    dialogName: 'alert'
                });
            };
            if (ret.eventType == 'right') {
              $.ajax({
                 url: dns + 'hotelorder/cancel',
                 type: 'POST',
                 data: {'id':id},
                 beforeSend: function(request) {
                     request.setRequestHeader("token", localStorage.getItem("token"));
                     },
                 success: function (res) {
                    if(res.status == 1){
                      var dialogBox = api.require('dialogBox');
                      dialogBox.close({
                          dialogName: 'alert'
                      });
                      setTimeout(function(){
                        toast.success({
                            title: "订单已取消",
                            duration: 1500
                        });
                        orders_list();
                      },2000)
                    }else{
                      var dialogBox = api.require('dialogBox');
                      dialogBox.close({
                          dialogName: 'alert'
                      });
                      setTimeout(function(){
                        api.toast({
                            msg: JSON.parse(err.responseText).msg,
                            duration: 2000,
                            location: 'bottom' //'bottom'
                        });
                      },2000)
                    }
                 },
                });
            };
        });
    }
</script>

</html>
